<template>
    <div class="app-container">
        <el-form :model="form" :rules="rules" label-width="100px" ref="form1">
            <el-form-item prop="taskName" label="任务名称">
                <el-input v-model="form.taskName"></el-input>
            </el-form-item>
            <el-form-item prop="taskTypeId" label="任务类型">
                <!-- <el-select v-model="form.taskTypeId" filterable clearable> -->
                <!-- <el-option :label="item.typeName" :value="item.id" v-for="item in $store.state.renwulx.leixing"
                        :key="item.id"> -->
                {{ form.taskTypeId }}
                <el-cascader v-model="taskTypeIds" @change="asdf" :options="options"
                    :props="{ label: 'typeName', value: 'id' }"></el-cascader>


                <!-- </el-option> -->
                <!-- </el-select> -->
            </el-form-item>



            <el-form-item prop="taskDistrict" label='行政区'>
                <el-select v-model="form.taskDistrict" clearable filterable>
                    <el-option :label="item.label" :value="item.label" clearable v-for="item in qu" :key="item.id">

                    </el-option>
                </el-select>
            </el-form-item>



            <el-form-item prop="taskCity" label="任务地点">
                <el-input v-model="form.taskCity"></el-input>
            </el-form-item>


            <el-form-item label="开始时间" clearable>
       
                <!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker> -->


                <el-date-picker v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>

            </el-form-item>



            <el-form-item label="结束时间" clearable>
                <!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker> -->


                <el-date-picker v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>


            </el-form-item>


            <el-form-item prop="taskAddress" label="详细地址">
                <el-input v-model="form.taskAddress"></el-input>
            </el-form-item>

            <el-form-item prop="latitude" label="纬度">
                <el-input v-model="form.latitude"></el-input>
            </el-form-item>
            <el-form-item prop="longitude" label="经度">
                <el-input v-model="form.longitude"></el-input>
            </el-form-item>
            <el-form-item>
                <ditu @getAddress="getAddress"></ditu>
            </el-form-item>
            {{ form.taskStatus }}

            <el-form-item prop="taskStatus" label="任务状态">
                <el-radio v-model.number="form.taskStatus" :label='1'>是</el-radio>
                <el-radio v-model.number="form.taskStatus" :label='0'>否</el-radio>

            </el-form-item>


            <el-form-item prop="cooperativeUnitsId" label='合作id'>
                {{ form.cooperativeUnitsId }}
                <el-select v-model="form.cooperativeUnitsId" clearable filterable>
                    <el-option :label="item.id" :value="item.id" clearable v-for="item in zhi" :key="item.id">

                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="cooperativeOther" label='合作单位'>
                {{ form.cooperativeOther }}
                <el-select v-model="form.cooperativeOther" clearable filterable>
                    <el-option :label="item.name" :value="item.name" clearable v-for="item in zhi" :key="item.id">

                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item prop="uav" label="无人机">
                <el-radio v-model.number="form.uav" :label='1'>是</el-radio>
                <el-radio v-model.number="form.uav" :label='0'>否</el-radio>

            </el-form-item>
            <el-form-item prop="dog" label="搜救犬">
                <el-radio v-model.number="form.dog" :label='1'>是</el-radio>
                <el-radio v-model.number="form.dog" :label='0'>否</el-radio>

            </el-form-item>
            <el-form-item prop="pub" label="是否公开">
                <el-radio v-model.number="form.pub" :label='1'>是</el-radio>
                <el-radio v-model.number="form.pub" :label='0'>否</el-radio>

            </el-form-item>
            <el-form-item prop="cover" label="封面">
                <!-- <el-input v-model="form.cover"></el-input> -->
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-change="handleCoverChange" action="">
                    <img v-if="form.cover" :src="form.cover" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>


            </el-form-item>
            <el-form-item prop="targetState" label="目标状态">
                <el-radio v-model.number="form.targetState" :label='0'>A</el-radio>
                <el-radio v-model.number="form.targetState" :label='1'>B</el-radio>
                <el-radio v-model.number="form.targetState" :label='2'>C</el-radio>
            </el-form-item>
            <!-- <el-form-item prop="content" label="内容"> -->
            <!-- <el-input type="textarea" v-model="form.content"></el-input> -->
            <!-- <wenben v-model="form.content"></wenben>
                {{ form.content }} -->
            <!-- </el-form-item> -->
            <!-- <el-form-item prop="cover" label="封面"> -->
            <!-- <el-input v-model="form.cover"></el-input> -->
            <!-- <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-change="handleCoverChange" action="">
                    <img v-if="form.cover" :src="form.cover" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>


            </el-form-item>
            <el-form-item prop="publishDate" label="发布时间">
                <el-date-picker v-model="form.publishDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间" align="right">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="tianjia">保存</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </div>

</template>
<script>

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import ditu from '@/components/ditu/ditu.vue'
import { tupushang } from '@/api/index';
import { renwutj } from '@/api/index'
import { hezuofang } from '@/api/index';

let qu = []
qu = regionData.find(item => item.label == '江苏省').children.find(item => item.label == '南京市').children
qu.push({ value: '8888888', label: '外市' })
console.log(qu);

export default {
    components: { ditu },
    data() {
        return {
            taskTypeIds: '',
            value1: '',
            typeids: [],
            options: [],
            form: {
                taskName: '',
                taskTypeId: '',
                taskCity: '',
                taskDistrict: '',

                startTime: '',
                taskStatus: 1,
                cooperativeUnitsId: null,
                cooperativeOther: '',
                uav: 0,
                dog: 0,
                targetState: 0,
                pub: 0,
                taskAddress: ''



            },
            rules: {},
            qu,
            mingcheng: [],
            idshu: [],
            zhi: [],
            di:'',
            did:''
        }
    },
    methods: {
        asdf() {
            this.form.taskTypeId = this.taskTypeIds[this.taskTypeIds.length - 1]
        },

        huoqu() {
            hezuofang().then(res => {
                console.log(res, 333);


                console.log(res.data, 1234);
                this.zhi = res.data
                // let idshu1=zhi.map(it=>it.id)
                // this.idshu=idshu1
                // let ming=zhi.map(it=>it.name)
                // this.mingcheng=ming
                console.log(this.zhi, 666);
                // console.log(this.mingcheng,555);

            })
        },
        beforeAvatarUpload(file) {
            console.log(file.type, 345);

            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 1;
            console.log('jinru', 234);

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG\PNG 格式!');
                console.log('格式', 111);

            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
                console.log('大小', 222);

            }
            console.log('外面', 44);

            return isJPG && isLt2M;
        },
        handleCoverChange(file) {
            if (this.beforeAvatarUpload(file.raw)) {

                const formData = new FormData();
                formData.append("img", file.raw);
                tupushang(formData).then(res => {
                    // console.log(res);
                    console.log('gggg', 33);

                    this.form.cover = res.data.img
                })
            }
        },

        recursion(data, arr, parentId) {
            data.forEach(item => {
                if (item.parentId === parentId) {
                    arr.push(item)
                    if (data.some(it => it.parentId === item.id)) {
                        item.children = []
                        this.recursion(data, item.children, item.id)


                    }
                }
            },



            )
        },
        tianjia() {
            console.log(1);
            console.log(this.form);


            renwutj(this.form).then(res => {
                console.log(1);

                console.log(res, 333);

            })
        },

        getAddress(val) {
            console.log(val, 55555);
            this.form.taskAddress = val.address
            this.form.latitude = val.latitude
            this.form.longitude = val.longitude
        }
    },
    watch: {
        'form.taskStatus'(newVal, oldVal) {
            console.log(`taskStatus 从 ${oldVal} 变为 ${newVal}`);
        },


    },
    mounted() {
        console.log(this.$store.state.renwulx.leixing, 999);
        let arr = []
        this.recursion(this.$store.state.renwulx.leixing, this.options, null)
        console.log(arr);
        console.log(this.form.taskStatus);
        console.log('Initial taskStatus:', this.form.taskStatus);

        this.huoqu()
console.log(this.$route,6666);
this.di = this.$route.query;
console.log(this.di,992244);
this.did=JSON.parse(JSON.stringify(this.di))
this.form=this.did
    }



}


</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>